<template>
  <div class="container">
 
    <div class="contentBox">
      <div class="content">
     

        <dv-scroll-board :config="config" style="width: 100%; height: 300px" />
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      dataLists: [
        {
          name: "数据名称11",
          form: "公安",
          manner: "api接口",
          Take: "159320",
          times: "2022-11-15 15:36:16",
        },
        {
          name: "数据名称11",
          form: "公安",
          manner: "api接口",
          Take: "159320",
          times: "2022-11-15 15:36:16",
        },
        {
          name: "数据名称11",
          form: "公安",
          manner: "api接口",
          Take: "159320",
          times: "2022-11-15 15:36:16",
        },
        {
          name: "数据名称11",
          form: "公安",
          manner: "api接口",
          Take: "159320",
          times: "2022-11-15 15:36:16",
        },
        {
          name: "数据名称11",
          form: "公安",
          manner: "api接口",
          Take: "159320",
          times: "2022-11-15 15:36:16",
        },
        {
          name: "数据名称11",
          form: "公安",
          manner: "api接口",
          Take: "159320",
          times: "2022-11-15 15:36:16",
        },
        {
          name: "数据名称11",
          form: "公安",
          manner: "api接口",
          Take: "159320",
          times: "2022-11-15 15:36:16",
        },
      ],

      config: {
            header: ['数据名称', '来源部门', '接入方式','耗时','时间'],
        data: [
          ["行1列1", "行1列2", "行1列3", "行1列3", "行1列3"],
          ["行1列1", "行1列2", "行1列3", "行1列3", "行1列3"],
          ["行1列1", "行1列2", "行1列3", "行1列3", "行1列3"],
          ["行1列1", "行1列2", "行1列3", "行1列3", "行1列3"],
          ["行1列1", "行1列2", "行1列3", "行1列3", "行1列3"],
          ["行1列1", "行1列2", "行1列3", "行1列3", "行1列3"],
          ["行1列1", "行1列2", "行1列3", "行1列3", "行1列3"],
          ["行1列1", "行1列2", "行1列3", "行1列3", "行1列3"],
        ],
      },
    };
  },
};
</script>
  <style lang="less" scoped >
.container::-webkit-scrollbar {
  width: 0px;
  opacity: 0;
  -webkit-overflow-scrolling: touch;
}
.contentBox::-webkit-scrollbar {
  width: 0px;
  opacity: 0;
  -webkit-overflow-scrolling: touch;
}
.content::-webkit-scrollbar {
  width: 0px;
  opacity: 0;
}
.container {
  width: 100%;
  height: 280px;
  color: #fff;

  box-sizing: border-box;

  overflow: hidden;
  overflow-y: scroll;
}
.contentBox {
  width: 100%;

  overflow: hidden;
}
.content {
  width: 100%;
  height: 100%;
}
.title {
  display: flex;
  align-content: center;
  justify-content: space-between;
  align-items: left;
  overflow: hidden;
  width: 100%;
  height: 40px;
  font-size: 14px;
  font-weight: bold;
  line-height: 40px;
  padding: 0 10px;
  box-sizing: border-box;

  color: rgba(98, 190, 255, 1);
  background: url("./../../../state/table-title.png");
  div {
    flex: 1;
  }
}
.content {
  width: 100%;

  // min-height: 100px;
  margin-top: 15px;

  .item {
    width: 100%;
    height: 40px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    flex-wrap: nowrap;
    background: url("./../../../state/table-title.png");
    div {
      flex: 1;
    }

    div {
      white-space: nowrap;
    }
  }
}
/deep/.row-item {
    width: 100%;
    height: 40px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    flex-wrap: nowrap;
    background: url("./../../../state/table-title.png") !important;
    background-color: none !important;
}
/deep/ .header{
   background: url("./../../../state/table-title.png") !important;
    background-color: none !important;
    // margin-bottom: 10px;
    height: 40px !important;
    line-height: 40px !important; 
     color: rgba(98, 190, 255, 1);
    font-weight: bold;
}
/deep/ .header-item{
      height: 40px !important;
    line-height: 40px !important; 
}
</style>
  